<template>
    <view style="height: 100%">
        <view
            :class="
                'l-tabs l-class ' +
                ('l-placement-' + placement) +
                ' ' +
                (placement === 'left' || placement === 'right' ? 'l-tabs-vertical' : 'l-tabs-horizontal') +
                ' ' +
                (scrollable ? 'l-tabs-scroll' : '')
            "
            :style="(width ? 'width:' + width + 'rpx;' : '') + (height ? 'height:' + height + 'rpx' : '')"
        >
            <scroll-view
                :scroll-x="placement === 'top' || (placement === 'bottom' && scrollable)"
                :scroll-y="placement === 'left' || (placement === 'right' && scrollable)"
                :scroll-top="transformY"
                :scroll-left="transformX"
                scroll-with-animation
                :class="'l-tabsscroll l-header-class ' + (hasLine ? 'l-tabs-header-line l-class-header-line l-header-line-class' : '')"
                :style="(width ? 'width:' + width + 'rpx;' : '') + ' ' + (height ? 'height:' + height + 'rpx' : '')"
            >
                <view :class="'l-tabs-header ' + (even && equalWidth ? 'l-tabs-equal-header' : 'l-tabs-unequal-header')">
                    <block v-for="(item, index) in tabList" :key="index">
                        <view
                            v-if="item.tab"
                            :class="
                                'l-tabs-item ' +
                                (even && equalWidth ? 'l-tabs-equal-width' : 'l-tabs-unequal-width') +
                                ' ' +
                                (item.key === activeKeyClone ? 'l-class-active l-active-class l-tabs-active' : 'l-class-inactive l-inactive-class l-tabs-inactive') +
                                ' ' +
                                ('l-tab-image-placement-' + item.picPlacement)
                            "
                            :style="
                                'color:' +
                                (item.key === activeKeyClone ? activeColor : inactiveColor) +
                                ';' +
                                (itemWidth ? 'width:' + itemWidth + 'rpx' : '') +
                                ';' +
                                (itemHeight ? 'height:' + itemHeight + 'rpx' : '')
                            "
                            :data-key="item.key"
                            :data-index="index"
                            mut-bind:tap="handleChange"
                        >
                            <l-badge
                                l-self-class="badge-view"
                                l-class="l-class-badge l-badge-class"
                                v-if="item.badgeCount > 0 || item.dotBadge"
                                :value="item.badgeCount"
                                :dot="item.dotBadge"
                                :max-count="item.badgeMaxCount"
                                :number-type="item.badgeCountType"
                            >
                                <!-- parse <template is="tab-item" :data="item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine"/> -->
                                <template name="tab-item">
                                    <image
                                        v-if="item.image.activeImage || item.image.defaultImage"
                                        :src="item.key === activeKeyClone ? item.image.activeImage : item.image.defaultImage"
                                        class="l-tab-image l-class-tabimage l-tab-image-class"
                                    />
                                    <l-icon
                                        v-if="item.icon"
                                        :l-class="'l-class-icon l-icon-class ' + (item.key === activeKeyClone ? 'l-icon-active' : 'l-icon-inactive')"
                                        :name="item.icon"
                                        :color="item.key === activeKeyClone ? activeColor : inactiveColor"
                                        :size="item.iconSize"
                                    />
                                    {{ item.tab }}
                                </template>
                            </l-badge>
                            <!-- parse <template is="tab-item" :data="item,activeKey,hasLine,activeColor,inactiveColor,animatedForLine" v-else/> -->
                            <template name="tab-item" v-if="false">
                                <image
                                    v-if="item.image.activeImage || item.image.defaultImage"
                                    :src="item.key === activeKeyClone ? item.image.activeImage : item.image.defaultImage"
                                    class="l-tab-image l-class-tabimage l-tab-image-class"
                                />
                                <l-icon
                                    v-if="item.icon"
                                    :l-class="'l-class-icon l-icon-class ' + (item.key === activeKeyClone ? 'l-icon-active' : 'l-icon-inactive')"
                                    :name="item.icon"
                                    :color="item.key === activeKeyClone ? activeColor : inactiveColor"
                                    :size="item.iconSize"
                                />
                                {{ item.tab }}
                            </template>
                            <view
                                :class="'l-tab-line ' + (item.key === activeKeyClone ? 'l-class-line l-line-class' : '') + ' ' + (animatedForLine ? 'l-line-aminmated' : '')"
                                v-if="hasLine"
                                :style="'background:' + (item.key === activeKeyClone ? activeColor : inactiveColor)"
                            ></view>
                        </view>

                        <view
                            v-else
                            :class="
                                'l-tabs-item ' +
                                (even && equalWidth ? 'l-tabs-equal-width' : 'l-tabs-unequal-width') +
                                ' ' +
                                (item.key === activeKeyClone ? 'l-class-active l-active-class l-tabs-active' : 'l-class-inactive l-inactive-class l-tabs-inactive') +
                                ' ' +
                                ('l-tab-image-placement-' + picPlacement)
                            "
                            :style="'color:' + (item.key === activeKeyClone ? activeColor : inactiveColor)"
                            :data-key="item.key"
                            :data-index="index"
                            mut-bind:tap="handleChange"
                        >
                            <slot :name="item.key"></slot>
                            <view
                                :class="'l-tab-line ' + (item.key === activeKeyClone ? 'l-class-line l-line-class' : '') + ' ' + (animatedForLine ? 'l-line-aminmated' : '')"
                                v-if="hasLine"
                                :style="'background:' + (item.key === activeKeyClone ? activeColor : inactiveColor)"
                            ></view>
                        </view>
                    </block>
                </view>
            </scroll-view>
        </view>
        <!-- template对应的原始代码，为保证正常显示，已对其进行隐藏。 -->
        <template name="tab-item" v-if="false">
            <image
                v-if="item.image.activeImage || item.image.defaultImage"
                :src="item.key === activeKeyClone ? item.image.activeImage : item.image.defaultImage"
                class="l-tab-image l-class-tabimage l-tab-image-class"
            />
            <l-icon
                v-if="item.icon"
                :l-class="'l-class-icon l-icon-class ' + (item.key === activeKeyClone ? 'l-icon-active' : 'l-icon-inactive')"
                :name="item.icon"
                :color="item.key === activeKeyClone ? activeColor : inactiveColor"
                :size="item.iconSize"
            />
            {{ item.tab }}
        </template>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lBadge from '../badge/index';
import lSegmentItem from '../segment-item/index';
import scrollCenter from '../behaviors/scrollCenter';
export default {
    unicomGroup: ['segment-item'],
    data() {
        return {
            _cells: [],
            tabList: [],
            currentIndex: 0,
            _segmentItemInstances: [],
            transformY: '',
            transformX: '',
            picPlacement: '',
            activeKeyClone: ''
        };
    },
    mixins: [scrollCenter],
    externalClasses: [
        'l-class',
        'l-header-class',
        'l-class-active',
        'l-active-class',
        'l-class-inactive',
        'l-inactive-class',
        'l-class-tabimage',
        'l-tab-image-class',
        'l-class-header-line',
        'l-header-line-class',
        'l-class-line',
        'l-line-class',
        'l-class-icon',
        'l-icon-class',
        'l-class-badge',
        'l-badge-class'
    ],
    options: {
        multipleSlots: true,
        pureDataPattern: /^_/
    },
    relations: {
        '../segment-item/index': {
            type: 'child',
            linked(e) {
                this.initTabs(e);
            }
        }
    },
    props: {
        activeKey: {
            type: String,
            default: ''
        },
        placement: {
            type: String,
            default: 'top'
        },
        scrollable: Boolean,
        hasLine: {
            type: Boolean,
            default: true
        },
        animatedForLine: Boolean,
        activeColor: {
            type: String
        },
        inactiveColor: {
            type: String
        },
        equalWidth: {
            type: Boolean,
            default: true
        },
        even: {
            type: Boolean,
            default: true
        },
        width: Number,
        height: Number,
        itemHeight: Number,
        itemWidth: Number
    },
    watch: {
        activeKey: function (e) {
            if (!e) {
                return;
            }
            const t = this.tabList.findIndex((t) => t.key === e);
            this.setData(
                {
                    currentIndex: t
                },
                () => {
                    if (this.scrollable) {
                        this.queryMultipleNodes();
                    }
                }
            );
        }
    },
    methods: {
        initTabs(e) {
            const t = this.activeKeyClone;
            let a = this.getRelationNodes('segment-item');
            if (a.length > 0) {
                if (a.length === this.tabList.length && this._segmentItemInstances.indexOf(e) > 0) {
                    return;
                }
                let s = t;
                let l = this.currentIndex;
                let i = [];
                const n = a.map(
                    (e, a) => (
                        t || 0 !== a ? (s = s) : (s = e.data.key),
                        e.data.key === s ? (l = a) : (l = l),
                        (i[a] = e.dataset.cell),
                        {
                            ...e.data
                        }
                    )
                );
                this.setData(
                    {
                        _cells: i,
                        activeKeyClone: s,
                        tabList: n,
                        currentIndex: l,
                        _segmentItemInstances: a
                    },
                    () => {
                        if (this.scrollable) {
                            this.queryMultipleNodes();
                        }
                    }
                );
            }
        },
        handleChange(e) {
            const t = e.currentTarget.dataset.key;
            const a = e.currentTarget.dataset.index;
            this._setChangeData({
                activeKey: t,
                currentIndex: a
            });
        },
        _setChangeData({ activeKey: e, currentIndex: t }) {
            this.setData(
                {
                    activeKeyClone: e,
                    currentIndex: t
                },
                () => {
                    if (this.scrollable) {
                        this.queryMultipleNodes();
                    }
                }
            );
            this.$emit('linchange', {
                detail: {
                    activeKey: e,
                    currentIndex: t,
                    cell: this._cells[t]
                }
            });
        }
    },
    created: function () {
        /** linked处理 */
        this.getRelationNodes('segment-item').map((e) => {
            this.initTabs(e);
        });
    }
};
</script>
<style>
.l-tabs {
    overflow: auto;
    width: 100%;
}
.l-tabs-header {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
}
.l-tabs-header .l-tabs-item {
    font-size: 28rpx;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.l-tabs-header .l-icon-active,
.l-tabs-header .l-tabs-active {
    color: #333;
}
.l-tabs-header .l-icon-active,
.l-tabs-header .l-icon-inactive {
    font-size: 28rpx;
}
.l-tabs-header .l-icon-inactive,
.l-tabs-header .l-tabs-inactive {
    color: #bbb;
}
.l-tabs-header .l-tabsitems-row {
    flex-direction: row;
}
.l-tabs-header .l-tabsitems-row .l-icon-active,
.l-tabs-header .l-tabsitems-row .l-icon-inactive {
    margin-right: 10rpx;
}
.l-tabs-header .l-tabsitems-row-reverse {
    flex-direction: row-reverse;
}
.l-tabs-header .l-tabsitems-row-reverse .l-icon-active,
.l-tabs-header .l-tabsitems-row-reverse .l-icon-inactive {
    margin-left: 10rpx;
}
.l-placement-bottom,
.l-placement-top {
    height: 80rpx;
}
.l-placement-bottom .l-tabs-header,
.l-placement-top .l-tabs-header {
    height: 100%;
}
.l-placement-bottom .l-tabs-header .l-tabs-item,
.l-placement-top .l-tabs-header .l-tabs-item {
    min-height: 100%;
}
.l-placement-right {
    flex-direction: row-reverse;
}
.l-placement-bottom {
    flex-direction: column-reverse;
}
.l-tabs-vertical .l-tabpanel-swiper {
    height: initial;
}
.l-tabs-scroll.l-tabs-horizontal .l-tabs-header {
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.l-tabs-scroll.l-tabs-horizontal .l-tabs-header .l-tabs-item {
    overflow: visible;
}
.l-tabs-vertical {
    width: 160rpx;
}
.l-tabs-vertical .l-tabsscroll {
    width: 160rpx;
    box-sizing: border-box;
}
.l-tabs-vertical .l-tabs-equal-header {
    height: 100%;
}
.l-tabs-vertical .l-tabs-header {
    width: 100%;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    overflow-x: hidden;
}
.l-tabs-vertical .l-tabs-header .l-tabs-item.l-tabs-active {
    background: #fff;
}
.l-tabs-vertical .l-tabs-header .l-tabs-unequal-width {
    height: 80rpx;
}
.l-tabs-vertical .l-tabs-header .l-tabs-item {
    overflow: visible;
    background: #f6f8fa;
    width: 100%;
}
.l-tabs-item {
    position: relative;
}
.l-tab-line {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;
}
.l-tabs-horizontal .l-tabs-equal-width {
    flex: 1;
}
.l-tabs-horizontal .l-tabs-unequal-width {
    padding: 0 20rpx;
}
.l-tabs-horizontal .l-tabsscroll {
    height: 100%;
    box-sizing: border-box;
}
.l-tabs-horizontal .l-tab-line {
    height: 4rpx;
    width: 0;
    left: 100%;
    right: 0;
    margin: 0 auto;
}
.l-tabs-horizontal .l-line-aminmated {
    transition: 0.2s all linear;
}
.l-tabs-horizontal .l-tabs-active.l-tabs-item ~ .l-tabs-item .l-tab-line {
    left: 0;
}
.l-tabs-horizontal .l-tabs-active .l-tab-line {
    width: 100%;
    left: 0;
}
.l-tabs-horizontal .l-tabs-active .l-line-aminmated {
    transition-delay: 0.1s;
}
.l-placement-top .l-tab-line {
    bottom: 0;
    transform: translateY(-100%);
}
.l-placement-top .l-tabs-header-line {
    border-bottom: 1px solid #f3f3f3;
}
.l-placement-bottom .l-tab-line {
    top: 0;
}
.l-placement-bottom .l-tabs-header-line {
    border-top: 1px solid #f3f3f3;
}
.l-tabs-vertical .l-tab-line {
    width: 6rpx;
    height: 0;
    border-radius: 0 6rpx 6rpx 0;
    top: 0;
    margin: auto 0;
}
.l-tabs-vertical .l-line-aminmated {
    transition: 0.2s all linear;
}
.l-tabs-vertical .l-tabs-active .l-tab-line {
    height: 40rpx;
}
.l-tabs-vertical .l-tabs-active .l-line-aminmated {
    transition-delay: 0.1s;
}
.l-tabs-vertical .l-tabs-active.l-tabs-item ~ .l-tabs-item .l-tab-line {
    height: 0;
    top: 0;
}
.l-placement-left .l-tab-line {
    right: auto;
}
.l-placement-left .l-tabs-header-line {
    border-left: 1px solid #f3f3f3;
}
.l-placement-right .l-tab-line {
    right: 0;
    left: auto;
}
.l-placement-right .l-tabs-header-line {
    border-right: 1px solid #f3f3f3;
}
.l-tab-image {
    width: 100rpx;
    height: 100rpx;
}
.l-tab-image-placement-top {
    flex-direction: column;
}
.l-tab-image-placement-bottom {
    flex-direction: column-reverse;
}
.l-tab-image-placement-left {
    flex-direction: row;
}
.l-tab-image-placement-right {
    flex-direction: row-reverse;
}
.l-tabs-header .badge-view {
    top: -20rpx;
}
@import '@/miniprogram_npm/lin-ui/segment/index.wxss';
</style>
